<template>
    <div v-show="canShow">
        <!-- 充值成功弹窗 -->
        <div class="RechargeSuccessful" v-if="RechargeSuccessful">
            <div class="RechargeSuccessful_bg">
                <div class="RechargeSuccessful_content">
                <div class="RechargeSuccessful_close" ><i class="el-icon-close" @click="closeWindow"></i></div>
                <div class="RechargeSuccessful_content_icon"><i class="el-icon-check"></i></div>
                <div class="RechargeSuccessful_content_title">恭喜您！充值成功</div>
                </div>
            </div>
        </div>

        <!-- 充值弹窗 -->
        <div class="rechargepoints" v-show="!RechargeSuccessful">
            <div class="rechargepoints_bg">
                <div class="rechargepoints_content">
                <div class="rechargepoints_content_bg"><img src="@a/img/bg28.jpg"/></div>
                <div class="rechargepoints_content_left">
                    <div class="content_left_title">AI创作平台</div>
                    <div class="content_left_txt">
                    <div class="left_txt_list">
                        <div class="txt_list_dd">优质内容</div>
                        <div class="txt_list_dt">
                        <div class="list_dt_li"><i class="el-icon-check"></i>基于AI神经网络原创内容</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>按要求一键生成优质标题</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>可根据需求设置审核机制</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>可以根据您的需求创意</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>AI自然语言处理技术</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>高质量内容生成</div>
                        </div>
                    </div>
                    <div class="left_txt_list">
                        <div class="txt_list_dd">高效工具</div>
                        <div class="txt_list_dt">
                        <div class="list_dt_li"><i class="el-icon-check"></i>AI大批量生成文章内容</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>7*24待命处理发布文章</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>可按频率自动发布数据</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>文章内容自动插入图片</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>多站点发布数据</div>
                        <div class="list_dt_li"><i class="el-icon-check"></i>发布数据智能统计</div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="rechargepoints_content_right">
                    <div class="content_right_top">
                    <div class="right_top_left">
                        <div class="top_left_img"><img :src="this.baseURL + this.$store.getters.memberInfo['avatar']"/></div>
                        <div class="top_left_right">
                        <div class="left_right_dd">{{ $store.getters.memberInfo['name'] }}</div>
                        <div class="left_right_dt">余额：<span>{{ $store.getters.memberInfo['point_num'] }}</span> 积分</div>
                        </div>
                    </div>
                    <div class="right_top_close" @click="closeWindow"><img src="@a/img/close.svg"/></div>
                    </div>
                    <div class="content_right_bottom">
                    <div class="right_bottom_txt">
                        <div class="bottom_txt_recharge">
                        <MySwiper @child-click="handleChildClick" :list="rechargeList" :default_index="default_index"  v-if="can_swiper"></MySwiper>
                        </div>
                        <div class="bottom_txt_integral">
                          <div class="txt_integral_left">充值{{ amoney }}元可获赠<span>{{ reward_points }}</span>积分，总共{{ parseInt(aintegral)  + parseInt(reward_points) }}积分</div>
                          <a href="#/integral/rechargeDetails" target="_blank" class="txt_integral_right notBlue"><img src="@a/img/sv67.svg"/>申请发票</a>
                        </div>
                        <div class="bottom_txt_Benefit">
                        <div class="txt_Benefit_title">您将享受的权益</div>
                        <div class="txt_Benefit_con">
                            <div class="Benefit_con_list"><span><img src="@a/img/sv17.svg"/></span>海量文章生成</div>
                            <div class="Benefit_con_list"><span><img src="@a/img/sv18.svg"/></span>优质内容创作</div>
                            <div class="Benefit_con_list"><span><img src="@a/img/sv19.svg"/></span>多站点自动发布</div>
                            <div class="Benefit_con_list"><span><img src="@a/img/sv20.svg"/></span>高速加密通道</div>
                            <div class="Benefit_con_list"><span><img src="@a/img/sv21.svg"/></span>高效数据处理</div>
                            <div class="Benefit_con_list"><span><img src="@a/img/sv22.svg"/></span>海量图片托管</div>

                        </div>
                        </div>
                    </div>
                    <div class="right_bottom_money">
                        <div class="bottom_money_title">
                        <div class="money_title_dd">￥{{ amoney }}</div>
                        <div class="money_title_dt">{{ describe }}</div>
                        </div>
                        <div class="bottom_money_img">
                        <span class="money_img_icon1"></span>
                        <span class="money_img_icon2"></span>
                        <span class="money_img_icon3"></span>
                        <span class="money_img_icon4"></span>
                        <img :src="images"/>
                        </div>
                        <div class="bottom_money_pay">
                        <span><img src="@a/img/sv23.svg"/></span>
                        <span><img src="@a/img/sv24.svg"/></span>
                        请用支付宝/微信扫码支付
                        </div>
                        <div class="bottom_money_protocol">
                        <div class="money_protocol_btn" @click="openProtocol">《会员服务协议》</div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>
        </div>

        
        <!-- 预览 -->
        <div class="RechargePreview" v-show="showRechargePreview">
            <div class="RechargePreview_content">
                <div class="RechargePreview_content_title">
                    <a href="/member/#/integral/rechargeDetails" target="_blank" class="content_title_left"><span></span>申请发票</a>
                    <div class="content_title_right" @click="showRechargePreview = !showRechargePreview"><i class="el-icon-close"></i></div>
                </div>
                <div class="RechargePreview_content_txt">
                  发票申请功能正在升级中，如您着急需要可发邮件到：<a href="mailto:lynn@jijinweb.com?subject=AIDOG平台发票具开&body=注册手机号码:">lynn@jijinweb.com</a>中索取。
                </div>
            </div>
        </div>



    </div>
</template>

<script>
    import MySwiper from "@c/common/mySwiper/mySwiper";
    import { Loading } from 'element-ui';

    export default {
        name: "rechargeWindow",
        data() {
            return {
              showRechargePreview: false,
              canShow: false,
              amoney: '',
              aintegral: '',
              describe: '',
              images:'',
              RechargeSuccessful: false,
              interval: null,
              rechargeList: [],
              default_index: 0,
              can_swiper: false,
              reward_points: 0,
              loadingInstance: null,

            };
        },
        components: {
            MySwiper
        },
        methods: {
          openProtocol() {
            window.open('https://www.ai-dog.net/serviceAgreement.html', '_blank');
          },
          handleChildClick(money, integral, images, reward_points, describe) {
            this.amoney = money
            this.aintegral = integral
            this.images = images
            this.reward_points = reward_points
            this.describe = describe
          },
          closeWindow(){
            let that = this;

            clearInterval(that.interval)
            that.$emit('close')
          },
          getProductList(){
            let that = this;
            that.axios.post('/api/products/getList').then(
                res => {
                  if(res.code === 1){
                    that.rechargeList = res.result;
                    that.rechargeList.forEach( (item,index) => {
                      if(item.is_recommend){
                        that.default_index = index
                      }
                    })
                    let this_item = that.rechargeList[that.default_index]
					that.handleChildClick(this_item.money, this_item.integral, this_item.images, this_item.reward_points, this_item.describe)
                    that.can_swiper = true
                    that.canShow = true

                    that.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                      that.loadingInstance.close();
                    });

                    that.interval = setInterval(function(){
                      that.axios.post('/api/pointOrder/hasNewOrder').then(res=>{
                        if(res.code === 1) {
                          if(res.result){
                            that.$message.success('支付成功')

                            that.RechargeSuccessful = true;
                            // that.closeWindow()
                            clearInterval(that.interval)
                            that.axios.get('/api/member/getInfo').then(res => {
                              localStorage.setItem('memberInfo', JSON.stringify(res.result) )
                              that.$store.commit('setMemberInfo', res.result)
                            })
                          }
                        }
                      })
                    }, 1000)
                  }
                }
            )
          }
        },
        created() {
          this.loadingInstance = Loading.service({});
          this.getProductList()


        }
    }
</script>

<style scoped>
    @import "rechargeWindow.css";
</style>
